<!--
 * @Author: egg1bro
 * @Date: 2023-01-10 15:50:41
 * @LastEditTime: 2023-01-14 15:41:15
 * @LastEditors: egg1bro
 * @Description: 
 * @FilePath: \team-graduation-design\src\views\personInfo\updatePassword.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <!-- 导航栏 -->
    <div class="nav">
        <van-nav-bar title="修改密码">
            <template #left>
                <van-icon name="arrow-left" size="20" color="#3c3c3c" @click="goManageAccount" />
            </template>
        </van-nav-bar>
    </div>
    <div class="deepColor">
        未设置或忘记旧密码，请 <a href="#" @click="toForgetPassword">点击此处</a>
    </div>
    <div class="body">
        <van-cell-group inset>
            <!-- 输入手机号，调起手机号键盘 -->
            <van-field v-model="password" type="tel" placeholder="旧密码" clearable />
            <van-field v-model="newPassword" center clearable placeholder="新密码">
            </van-field>
        </van-cell-group>
    </div>
    <!-- 登录按钮 -->
    <div class="lgbtn" @click="submitPassword">
        <van-button square block type="primary" native-type="submit">
            登录
        </van-button>
    </div>
    <div class="remind">
        密码同时适用于多平台登录
    </div>

</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUpdateUserInfo } from '@/stores/updateUserInfo'
// 实例化路由
const router = useRouter()
// 实例化仓库
const updateUserInfo = useUpdateUserInfo()

const { getUpdateUserPassword } = updateUserInfo

// 定义变量
const newPassword = ref('')
const password = ref('')

// to 账号管理页面
const goManageAccount = () => {
    router.push('/manageAccount')
}

// 跳转到forgetPassword页面
const toForgetPassword = () => {
    router.push('/forgetPassword')
}

// 提交修改用户密码
const submitPassword = async () => {
    await getUpdateUserPassword({ newPassword: newPassword.value, password: password.value })
}
</script>

<style lang="less" scoped>
.deepColor {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f6f8;
    height: 30px;
    color: #acadaf;

    a {
        color: #4a9ced;
        text-decoration: none;
    }
}

.lgbtn {
    margin: 30px 30px 10px 30px;
}

.remind {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #acadaf;
    margin-top: 30px;
}
</style>